<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!--[if IE 8]>			<html class="ie ie8"> <![endif]-->
<!--[if IE 9]>			<html class="ie ie9"> <![endif]-->
<!--[if gt IE 9]><!-->
<html class="nivo-lightbox-notouch"><!--<![endif]--><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<meta charset="utf-8">
<meta name="keywords" content="HTML5 Template">
<meta name="description" content="Multipress - Responsive Multipurpose HTML5 Template">
<meta name="author" content="">
<title> NET.GODBIRDS </title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="apple-touch-icon" href="static/images/project/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="static/images/project/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="static/images/project/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="144x144" href="static/images/project/apple-touch-icon-144x144.png">

<!--[if lt IE 9]>
	<script src="/js/libs/respond.min.js"></script>
	<![endif]-->

<link href="static/css/bootstrap.css" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="static/css/font-awesome.css">
<link rel="stylesheet" href="static/css/style.css">
<link rel="stylesheet" href="static/css/flexslider.css">
<link rel="stylesheet" href="static/css/nivo-lightbox.css">
<link rel="stylesheet" href="static/css/default.css">
<link rel="stylesheet" href="static/css/animate.css">
<!--[if lt IE 9]>
	<script src="/js/libs/html5.js"></script>
	<![endif]-->

<link rel="stylesheet" type="text/css" href="static/css/colors/yellow-black.css" title="yellow" media="screen">
<link rel="alternate stylesheet" type="text/css" href="static/css/colors/violet-black.css" title="black" media="screen">
<link rel="alternate stylesheet" type="text/css" href="static/css/colors/orange-black.css" title="orange" media="screen">
<link rel="alternate stylesheet" type="text/css" href="static/css/colors/blue-black.css" title="blue" media="screen">
<link rel="alternate stylesheet" type="text/css" href="static/css/colors/red-black.css" title="red" media="screen">
<link rel="alternate stylesheet" type="text/css" href="static/css/colors/green-black.css" title="green" media="screen">
<link rel="alternate stylesheet" type="text/css" href="static/css/colors/pink-black.css" title="pink" media="screen">
<link rel="alternate stylesheet" type="text/css" href="static/css/colors/pale-green-black.css" title="pale-green" media="screen">
</head>
<body>

<div id="mask" style="display: none;">
<div class="loader" style="display: none;">
<img src="static/images/loading.gif" alt="loading">
</div>
</div>
<div class="main-content">
<div class="container no-padding">
<div class="row">
<div class="col-md-3 l-content">
<div class="profile-pic">
<div class="pic-bg"><img src="static/images/profile-avatar.png" class="img-responsive" alt=""></div>
</div>
<nav>
<ul class="navigation">
<li class="flex-active"><a href="#">首页 <i class="fa fa-user"></i></a></li>
<li><a href="#">Work <i class="fa fa-briefcase"></i></a></li>
<li><a href="#">Resume <i class="fa fa-file-text"></i></a></li>
<li><a href="#">Blog <i class="fa fa-comment"></i></a></li>
<li><a href="#">Contact <i class="fa fa-envelope"></i></a></li>
</ul>
</nav>
</div>
<div class="col-md-9 r-content">
<div class="flexslider" style="height: 0px;">
<div class="slides">

<section class="no-display flex-active-slide" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2;">
<div class="profile" id="1">
<h2 class="animated fadeInDown">Welcome to <span>NET.GODBIRDS</span><br> There you can do what you want</h2>
<div class="sep1"></div>
<p class="animated fadeInDown">I have ten years experience as a 
web/interface designer. I have a love of clean, elegant styling, and I 
have lots of experience in the production of CSS and (X)HTML for modern 
websites. I have a reasonable grasp of using JavaScript frameworks, 
specifically jQuery.</p>
<div class="personal-info col-md-12 no-padding animated flipInX">
<h4>Personal Info</h4>
<div class="sep2"></div>
<ul>
<li>
<div class="p-info"><em>name</em><span>Robb Armstrong</span></div>
</li>
<li>
<div class="p-info"><em>date of birth</em><span>September 06, 1976</span></div>
</li>
<li>
<div class="p-info"><em>e-mail</em><span>info@yourdomain.com</span></div>
</li>
<li>
<div class="p-info"><em>address</em><span>121 King St, Melbourne VIC</span></div>
</li>
<li>
<div class="p-info"><em>phone</em><span>012-3456-7890</span></div>
</li>
<li>
<div class="p-info"><em>website</em><span>www.themeforest.net</span></div>
</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</section>


<section class="no-display" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;">
<div class="works" id="2">
<div class="page-head animated fadeInDown">
<div class="row">
<div class="col-md-5">
<h3>Portfolio</h3>
</div>
<div class="col-md-7">
<div class="np-main">
<p>Go to next/previous page</p>
<div class="np-controls">
<a href="#" class="previous"><i class="fa fa-arrow-circle-left"></i></a>
<a href="#" class="next"><i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-wrap">
<div class="row">
<ul id="filter-list" class="clearfix">
<li class="filter active" data-filter="all"><i class="fa fa-th"></i> All</li>
<li class="filter" data-filter="webdesign">Web Design</li>
<li class="filter" data-filter="appicon">App Icons</li>
<li class="filter" data-filter="iosappui">iOS App UI</li>
<li class="filter" data-filter="illustration">Illustration</li>
</ul>
<ul id="portfolio">
<li class="item col-md-4 webdesign animated flipInX mix_all" style="display: inline-block;  opacity: 1;">
<a href="static/images/projects/1-big.jpg" class="nivo-lbox">
<div class="folio-img">
<img src="static/images/project/1.jpg" alt="" class="img-responsive" draggable="false">
<div class="overlay">
<div class="overlay-inner">
<h4>Cool App Design</h4>
<p>branding, logo</p>
</div>
</div>
</div>
</a>
</li>
<li class="item col-md-4 illustration animated flipInX mix_all" style="display: inline-block;  opacity: 1;">
<a href="https:/www.youtube.com/watch?v=L9szn1QQfas" class="nivo-lbox">
<div class="folio-img">
<img src="static/images/project/2_002.jpg" alt="" class="img-responsive" draggable="false">
<div class="overlay">
<div class="overlay-inner">
<h4>Cool App Design</h4>
<p>branding, logo</p>
</div>
</div>
</div>
</a>
</li>
<li class="item col-md-4 appicon animated flipInX mix_all" style="display: inline-block;  opacity: 1;">
<a href="http://vimeo.com/71071717" class="nivo-lbox">
<div class="folio-img">
<img src="static/images/project/3.jpg" alt="" class="img-responsive" draggable="false">
<div class="overlay">
<div class="overlay-inner">
<h4>Cool App Design</h4>
<p>branding, logo</p>
</div>
</div>
</div>
</a>
</li>
<li class="item col-md-4 iosappui animated flipInX mix_all" style="display: inline-block;  opacity: 1;">
<a href="static/images/projects/1-big.jpg" class="nivo-lbox">
<div class="folio-img">
<img src="static/images/project/4.jpg" alt="" class="img-responsive" draggable="false">
<div class="overlay">
<div class="overlay-inner">
<h4>Cool App Design</h4>
<p>branding, logo</p>
</div>
</div>
</div>
</a>
</li>
<li class="item col-md-4 iosappui animated flipInX mix_all" style="display: inline-block;  opacity: 1;">
<a href="static/images/projects/1-big.jpg" class="nivo-lbox">
<div class="folio-img">
<img src="static/images/project/5.jpg" alt="" class="img-responsive" draggable="false">
<div class="overlay">
<div class="overlay-inner">
<h4>Cool App Design</h4>
<p>branding, logo</p>
</div>
</div>
</div>
</a>
</li>
<li class="item col-md-4 illustration animated flipInX mix_all" style="display: inline-block;  opacity: 1;">
<a href="static/images/projects/1-big.jpg" class="nivo-lbox">
<div class="folio-img">
<img src="static/images/project/6.jpg" alt="" class="img-responsive" draggable="false">
<div class="overlay">
<div class="overlay-inner">
<h4>Cool App Design</h4>
<p>branding, logo</p>
</div>
</div>
</div>
</a>
</li>
<li class="item col-md-4 webdesign animated flipInX mix_all" style="display: inline-block;  opacity: 1;">
<a href="static/images/projects/1-big.jpg" class="nivo-lbox">
<div class="folio-img">
<img src="static/images/project/7.jpg" alt="" class="img-responsive" draggable="false">
<div class="overlay">
<div class="overlay-inner">
<h4>Cool App Design</h4>
<p>branding, logo</p>
</div>
</div>
</div>
</a>
</li>
<li class="item col-md-4 iosappui animated flipInX mix_all" style="display: inline-block;  opacity: 1;">
<a href="static/images/projects/1-big.jpg" class="nivo-lbox">
<div class="folio-img">
<img src="static/images/project/8.jpg" alt="" class="img-responsive" draggable="false">
<div class="overlay">
<div class="overlay-inner">
<h4>Cool App Design</h4>
<p>branding, logo</p>
</div>
</div>
</div>
</a>
</li>
<li class="item col-md-4 webdesign animated flipInX mix_all" style="display: inline-block;  opacity: 1;">
<a href="static/images/projects/1-big.jpg" class="nivo-lbox">
<div class="folio-img">
<img src="static/images/project/9.jpg" alt="" class="img-responsive" draggable="false">
<div class="overlay">
<div class="overlay-inner">
<h4>Cool App Design</h4>
<p>branding, logo</p>
</div>
</div>
</div>
</a>
</li>
<li class="item col-md-4 illustration animated flipInX mix_all" style="display: inline-block;  opacity: 1;">
<a href="static/images/projects/1-big.jpg" class="nivo-lbox">
<div class="folio-img">
<img src="static/images/project/10.jpg" alt="" class="img-responsive" draggable="false">
<div class="overlay">
<div class="overlay-inner">
<h4>Cool App Design</h4>
<p>branding, logo</p>
</div>
</div>
</div>
</a>
</li>
 <li class="item col-md-4 appicon animated flipInX mix_all" style="display: inline-block;  opacity: 1;">
<a href="static/images/projects/1-big.jpg" class="nivo-lbox">
<div class="folio-img">
<img src="static/images/project/11.jpg" alt="" class="img-responsive" draggable="false">
<div class="overlay">
<div class="overlay-inner">
<h4>Cool App Design</h4>
<p>branding, logo</p>
</div>
</div>
</div>
</a>
</li>
<li class="item col-md-4 iosappui animated flipInX mix_all" style="display: inline-block;  opacity: 1;">
<a href="static/images/projects/1-big.jpg" class="nivo-lbox">
<div class="folio-img">
<img src="static/images/project/12.jpg" alt="" class="img-responsive" draggable="false">
<div class="overlay">
<div class="overlay-inner">
<h4>Cool App Design</h4>
<p>branding, logo</p>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>


<section class="no-display" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;">
<div class="item resume" id="3">
<div class="page-head animated fadeInDown">
<div class="row">
<div class="col-md-5">
<h3>Resume</h3>
</div>
<div class="col-md-7">
<div class="np-main">
<p>Go to next/previous page</p>
<div class="np-controls">
<a href="#" class="previous"><i class="fa fa-arrow-circle-left"></i></a>
<a href="#" class="next"><i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="resume-info animated slideInLeft">
<h4>Education</h4>
<div class="sep2"></div>
<ul>
<li>
<h5>Academy of Art University</h5>
<span class="year"><i class="fa fa-calendar"></i> 2001 - 2004</span>
<p>Academy of Art University's School of Web Design &amp; New Media is 
the intersection between traditional design and new technologies.</p>
</li>
<li>
<h5>IT Technical Institute</h5>
<span class="year"><i class="fa fa-calendar"></i> 2005 - 2008</span>
<p>Information technology (IT) workers can be found in many types of 
organizations. According to the U.S. Department of Labor, "In the modern
 workplace, it is imperative that Information Technology (IT) works both
 effectively and reliably</p>
</li>
<li>
<h5>Web Design School</h5>
<span class="year"><i class="fa fa-calendar"></i> 2009 - 2012</span>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel 
velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, 
nisi elit consequat.</p>
</li>
</ul>
</div>
<div class="skills-info">
<h4>Skills</h4>
<div class="sep2"></div>
<ul>
<li>
<p>Wordpress Development <span>71%</span></p>
<div class="skills-bg"><span class="skill1"></span></div>
</li>
<li>
<p>Photoshop <span>85%</span></p>
<div class="skills-bg"><span class="skill2"></span></div>
</li>
<li>
<p>HTML5/CSS3 <span>76%</span></p>
<div class="skills-bg"><span class="skill3"></span></div>
</li>
<li>
<p>Ruby on Rails <span>53%</span></p>
<div class="skills-bg"><span class="skill4"></span></div>
</li>
<li>
<p>Social Marketing <span>69%</span></p>
<div class="skills-bg"><span class="skill5"></span></div>
</li>
</ul>
</div>
<div class="services-info">
<h4>Services</h4>
<div class="sep2"></div>
<ul>
<li class="animated flipInX">
<i class="fa fa-cloud"></i>
 <h5>Design</h5>
</li>
<li class="animated flipInX">
<i class="fa fa-smile-o"></i>
<h5>Coding</h5>
</li>
<li class="animated flipInX">
<i class="fa fa-desktop"></i>
<h5>Responsive</h5>
</li>
<li class="animated flipInX">
<i class="fa fa-text-width"></i>
<h5>Planing</h5>
</li>
<li class="animated flipInX">
<i class="fa fa-comment"></i>
<h5>Wordpress</h5>
</li>
<li class="animated flipInX">
<i class="fa fa-picture-o"></i>
<h5>Photography</h5>
</li>
</ul>
</div>
<div class="resume-info animated slideInLeft">
<h4>Work Experience</h4>
<div class="sep2"></div>
<ul>
<li>
<h5>Graphic River</h5>
<span class="year"><i class="fa fa-calendar"></i> 2001 - 2004</span>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel 
velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor.</p>
</li>
<li>
<h5>Video Hive</h5>
<span class="year"><i class="fa fa-calendar"></i> 2005 - 2008</span>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel 
velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, 
nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio 
sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum 
velit.</p>
</li>
<li>
<h5>Themeforest</h5>
<span class="year"><i class="fa fa-calendar"></i> 2009 - 2014</span>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel 
velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor.</p>
</li>
</ul>
</div>
</div>
</section>


<section class="no-display" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;">
<div class="item blog" id="4">
<div class="page-head animated fadeInDown">
<div class="row">
<div class="col-md-5">
<h3>Blog</h3>
</div>
<div class="col-md-7">
<div class="np-main">
<p>Go to next/previous page</p>
<div class="np-controls">
<a href="#" class="previous"><i class="fa fa-arrow-circle-left"></i></a>
<a href="#" class="next"><i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="blog-wrap">
<article class="animated flipInX">
<div class="row">
<div class="col-md-5">
<img src="static/images/project/1_002.jpg" class="img-responsive" alt="" draggable="false">
</div>
<div class="col-md-7">
<h3><a href="static/blog-single.html">Standard Post with Image</a></h3>
<div class="post-meta">
<i class="fa fa-calendar"></i> <a href="#">30 march</a>
<i class="fa fa-user"></i> <a href="#">Admin</a>
<i class="fa fa-comments"></i> <a href="#">10 Comments</a>
</div>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel 
velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, 
nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio 
sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum 
velit.</p>
</div>
</div>
</article>
<div class="link-post">
<div class="row">
<div class="col-md-12">
<i class="fa fa-link"></i>
<a href="#">www.jq22.com</a>
</div>
</div>
</div>
<article class="animated flipInX">
<div class="row">
<div class="col-md-5">
<img src="static/images/project/2.jpg" class="img-responsive" alt="" draggable="false">
</div>
<div class="col-md-7">
<h3><a href="static/blog-single.html">Standard Post with Image</a></h3>
<div class="post-meta">
<i class="fa fa-calendar"></i> <a href="#">30 march</a>
<i class="fa fa-user"></i> <a href="#">Admin</a>
<i class="fa fa-comments"></i> <a href="#">10 Comments</a>
</div>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel 
velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, 
nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio 
sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum 
velit.</p>
</div>
</div>
</article>
<div class="quote-post">
<div class="row">
<div class="col-md-12">
<blockquote>This is Photoshop's version of Lorem Ipsum. Proin gravida 
nibh vel velit auctor aliquet. Aene.This is photoshop's version f Lorem 
Ipsum.</blockquote>
<i class="fa fa-quote-left"></i>
<span class="author-name">John Smith</span>
</div>
</div>
</div>
<article class="no-border animated flipInX">
<div class="row">
<div class="col-md-5">
<img src="static/images/project/3_002.jpg" class="img-responsive" alt="" draggable="false">
</div>
<div class="col-md-7">
<h3><a href="static/blog-single.html">Standard Post with Image</a></h3>
<div class="post-meta">
<i class="fa fa-calendar"></i> <a href="#">30 march</a>
<i class="fa fa-user"></i> <a href="#">Admin</a>
<i class="fa fa-comments"></i> <a href="#">10 Comments</a>
</div>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel 
velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, 
nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio 
sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum 
velit.</p>
</div>
</div>
</article>
</div>
</div>
</section>


<section class="no-height" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 0; display: block; z-index: 1;">
<div class="item contact" id="5">
<div class="page-head animated fadeInDown">
<div class="row">
<div class="col-md-5">
<h3>Contact Us</h3>
</div>
<div class="col-md-7">
<div class="np-main">
<p>Go to next/previous page</p>
<div class="np-controls">
<a href="#" class="previous"><i class="fa fa-arrow-circle-left"></i></a>
<a href="#" class="next"><i class="fa fa-arrow-circle-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="map">
<div class="gmap">
<div id="map"></div>
</div>
</div>
<div class="contact-info">
<h4>Contact info</h4>
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel 
velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, 
nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio 
sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum 
velit. Nam nec tellus a odio tincidunt auctor a ornare odio.</p>
<ul>
<li><i class="fa fa-home"></i> lorem ipsum street</li>
<li><i class="fa fa-phone"></i> +399 (500) 321 9548</li>
<li><i class="fa fa-envelope"></i> info@domain.com</li>
</ul>
</div>
<div class="contact-form">
<h4>Send us a message</h4>
<form id="contactForm" action="php/contact.php" method="post" class="positioned">
<div class="row">
<div class="col-md-4">
<input name="senderName" id="senderName" placeholder="name" type="text">
<input name="senderEmail" id="senderEmail" placeholder="e-mail" type="email">
<input name="subject" id="subject" placeholder="Subject" type="text">
</div>
<div class="col-md-8">
<textarea name="message" id="message" rows="6" placeholder="Message"></textarea>
<button type="submit">Send Message</button>
</div>
</div>
</form>
<div id="successMessage" class="successmessage">
<p><span class="success-ico"></span> Thanks for sending your message! We'll get back to you shortly.</p>
</div>
<div id="failureMessage" class="errormessage">
<p><span class="error-ico"></span> There was a problem sending your message. Please try again.</p>
</div>
<div id="incompleteMessage" class="statusMessage">
<p>Please complete all the fields in the form before sending.</p>
</div>
</div>
</div>
</section>

</div>
</div>

<footer>
<div class="row">
<div class="col-md-7">
<p>© 2014 Robb Armstrong. All Rights Reserved</p>
</div>
<div class="col-md-5">
<ul class="social">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
</ul>
</div>
</div>
</footer>
</div>
</div>
</div>
</div>


<div id="customizer" class="s-close">
<span class="corner"><span class="cog"></span></span>
<div id="options" class="visible">
<div class="options-head">
Style Switcher
</div>
<div class="options-segment clearfix headers-sel">
<h6 class="color-head">Body Background</h6>
<ul class="version">
<li><a class="lite bg-lite">Light</a></li>
<li><a class="dark bg-dark">Dark</a></li>
</ul>
</div>
<div class="options-segment clearfix colors-sel">
<h6 class="color-head">Color Scheme</h6>
<ul class="color-scheme clearfix">
<li class="yellow"><a href="static/css/colors/yellow-black" data-rel="yellow" class="styleswitch"></a></li>
<li class="green"><a href="static/css/colors/green-black" data-rel="green" class="styleswitch"></a></li>
<li class="red"><a href="static/css/colors/red-black" data-rel="red" class="styleswitch"></a></li>
<li class="blue"><a href="static/css/colors/blue-black" data-rel="blue" class="styleswitch"></a></li>
<li class="fblack"><a href="static/css/colors/violet-black" data-rel="black" class="styleswitch"></a></li>
<li class="orange"><a href="static/css/colors/orange-black" data-rel="orange" class="styleswitch"></a></li>
<li class="violet"><a href="static/css/colors/pink-black" data-rel="pink" class="styleswitch"></a></li>
<li class="pale-green"><a href="static/css/colors/pale-green-black" data-rel="pale-green" class="styleswitch"></a></li>
</ul>
</div>
</div>
</div>


<script src="static/js/jquery-1.js"></script><script src="static/js/jquery.js"></script>
<script src="static/js/styleswitch.js"></script>
<script src="static/js/style_switch_custom.js"></script>
<script>
$(function(){
    $(".bg-lite").click(function(){
        $("body").css("background","#d9dbdd"); 
    });
});

$(function(){
    $(".bg-dark").click(function(){
        $("body").css("background","#222222"); 
    });
});
 
</script>
<script src="static/js/bootstrap.js"></script>
<script src="static/js/jquery_002.js"></script>
<script src="static/js/jquery_006.js"></script>
<script src="static/js/jquery_004.js"></script>
<script src="static/js/nivo-lightbox.js"></script>
<script src="static/js/jquery_005.js"></script>
<script src="static/js/jquery_003.js"></script>
<script src="static/js/main.js"></script>
<script src="static/js/contact.js"></script>
<script src="static/js/animations.js"></script>


</body></html>